<%@page language="java" contentType="text/html; character=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/common/taglibs.jsp"%>


<%@ page import="com.javapandeng.analys.VisitorCounter" %>
<%
    //訪問量
    String count = VisitorCounter.readCount("F:/visitCount.txt");
    if (session.getAttribute("visit") == null) {
        session.setAttribute("visit", "y");//将未访问设置为访问
        session.setMaxInactiveInterval(60*60);//设置最大时效    单位是秒

        int count1 = Integer.parseInt(count);
        count1 = count1 + 1;
        count = String.valueOf(count1).toString();
        VisitorCounter.writeCount("F:/visitCount.txt", count);
    }
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>首页</title>
    <link type="text/css" rel="stylesheet" href="${ctx}/resource/user/css/style.css">
    <script src="${ctx}/resource/user/js/jquery-1.8.3.min.js"></script>
    <script src="${ctx}/resource/user/js/jquery.luara.0.0.1.min.js"></script>
    <style>
        #lbt {
            /*width:450px;
            height:450px;
            border:1px solid black;
            margin:0 auto;!*水平居中*!*/
            position:relative;/*相对定位*/
        }
        #imgchange {
            /*width:100%;
            height:100%;*/
            position:relative;
        }
        #imgchange > img {
            width:100%;
            height:100%;
            position:absolute;/*绝对定位，元素堆叠在一起*/
            opacity:0;
            transition:all 2s linear;/*过渡效果，显示透明度数值的变化*/
        }
        #imgchange > img.show {
            z-index:1;
            opacity:1;
        }
        /*原点样式*/
        #ulbtn {/*div块里面东西的位置*/
            list-style:none;
            position:absolute;
            left:600px;
            bottom:20px;
            z-index:10;
        }
        #ulbtn > li {
            width:30px;
            height:15px;
            border:1px solid black;
            border-radius:15px;
            float:left;/*浮动定位，块级元素li在一行显示*/
            margin-left:30px;
            background-color:#fff;
            opacity:0.3;
        }
        #ulbtn > li.show {
            opacity:0.8;
        }
        /*左右箭头样式*/
        #leftbtn, #rightbtn {
            width:30px;
            height:80px;
            position:absolute;
            top:150px;
            z-index:10;
            opacity:0.3;
        }
        #leftbtn {
            left:280px;
            transform:rotate(180deg);
        }
        #rightbtn {
            right:20px;
        }
        /*鼠标悬停时*/
        #leftbtn:hover, #rightbtn:hover {
            opacity:0.8
        }
        #leftbtn>img, #rightbtn>img{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <%@include file="/common/utop.jsp"%>
<!--导航条-->
<div class="width100" style="height: 45px;background: #dd4545;margin-top: 40px;position: relative;z-index: 100;">
    <!--中间的部分-->
    <div class="width1200 center_yh relative_yh" style="height: 45px;">
        <!--列表导航-->
        <div class="left_yh Selected" style="width: 230px;height: 45px;" id="hiddenShow">
            <!--头部的图标-->
            <img src="${ctx}/resource/user/images/cd.png" class="left_yh" style="margin-left: 24px;" alt="">
            <span class="block_yh left_yh fff" style="height: 45px;line-height: 44px;margin-left: 10px;">分类</span>
            <!--导航展开部分-->
            <div class="downSlide">
                <c:forEach items="${lbs}" var="data" varStatus="l">
                    <div class="n1Nav">
                        <font>${data.father.name}</font>
                        <img src="${ctx}/resource/user/images/jt.png" alt="">
                        <div class="n2Nav">
                            <div class="n3Nav">
                                <h3>${data.father.name}</h3>
                                <c:forEach items="${data.childrens}" var="child" varStatus="ll">
                                    <a href="${ctx}/item/shoplist?categoryIdTwo=${child.id}">${child.name}</a>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        <!--普通导航-->
        <div class="left_yh font16" id="pageNav">
            <a href="${ctx}/login/uIndex">首页</a>
            <a href="${ctx}/news/list">公告</a>
            <a href="${ctx}/message/add">留言</a>
        </div>
    </div>
</div>
<!--轮动广告-->
    <div id="lbt" class="width1200 center_yh hidden_yh" style="position: relative;z-index:80;">
        <div id="imgchange" style="width: 1200px;height: 490px;overflow: hidden;margin-left: 230px;">
            <img id="img1" src="${ctx}/resource/images/a.webp" alt="" class="show"/>
            <img id="img2" src="${ctx}/resource/images/b.webp" alt=""/>
            <img id="img3" src="${ctx}/resource/images/c.webp" alt=""/>
            <img id="img4" src="${ctx}/resource/images/d.webp" alt=""/>

        </div>
        <ul id="ulbtn">
            <li id="li1" onclick="libtnck(this)" class="show"></li>
            <li id="li2" onclick="libtnck(this)" ></li>
            <li id="li3" onclick="libtnck(this)" ></li>
            <li id="li4" onclick="libtnck(this)" ></li>
        </ul>
        <!-- 左右箭头-->
        <div id="leftbtn">
            <img src="${ctx}/resource/images/btn.jpg"/>
        </div>
        <div id="rightbtn">
            <img src="${ctx}/resource/images/btn.jpg"/>
        </div>
    </div>
<%--<div class="width1200 center_yh hidden_yh" style="position: relative;z-index:80;">
    <div class="example2" style="width: 1200px;height: 490px;overflow: hidden;margin-left: 230px;">
        <ul>
            <li><img src="${ctx}/resource/images/a.webp" alt=""></li>
            <li><img src="${ctx}/resource/images/b.webp" alt=""></li>
            <li><img src="${ctx}/resource/images/c.webp" alt=""></li>
            <li><img src="${ctx}/resource/images/d.webp" alt=""></li>
        </ul>
        <ul id="ulbtn">
            <li id="li1" onclick="libtnck(this)" class="show"></li>
            <li id="li2" onclick="libtnck(this)" ></li>
            <li id="li3" onclick="libtnck(this)" ></li>
            <li id="li4" onclick="libtnck(this)" ></li>
        </ul>
    </div>--%>
    <script>
        function lbt() {
            //1.获取class = show 的img元素，正在显示的图片
            var imgshow = document.querySelector("#imgchange>img.show");
            var lishow = document.querySelector("#ulbtn>li.show");
            //2.判断一下，是不是最后一张图片

            if (imgshow.nextElementSibling) {
                //true，如果正在显示的图片的下一元素有值，不是最后一张
                //将class=show传递给下一个元素
                imgshow.nextElementSibling.className = "show";
                lishow.nextElementSibling.className = "show";
            } else {//false，正在显示图片的下一个元素有值，不是最后一张
                //将class=show给第一张图片
                document.getElementById("imgchange").firstElementChild.className = "show";
                document.getElementById("ulbtn").firstElementChild.className = "show";
            }
            //3.将原来显示的图片和圆点清除显示
            imgshow.className = "";
            lishow.className = "";
        }
        //4.使用定时器，每隔4s，就执行一次图片切换函数
        var timer = setInterval(lbt, 4000);

        //点击圆点切换图片
        function libtnck(obj) {
            //先停止定时器
            clearInterval(timer);
            //正在显示的图片和按钮 classNane值清空
            document.querySelector("#imgchange>img.show").className = "";;
            document.querySelector("#ulbtn>li.show").className = "";;
            //点击的原点和对应的图片class的值为show
            obj.className = "show";
            //1.获取点击圆点id值中的数字
            var num = obj.id.slice(2);//slice（）从下标位置开始切割字符串，返回值字符
            //2.img+数字就是对应图片的id值
            document.getElementById("img" + num).className = "show";
            //再启动定时器
            timer = setInterval(lbt, 4000);
        }

        //右箭头切换图片,调用轮播图函数
        document.getElementById("rightbtn").onclick = function () {
            //先停止定时器
            clearInterval(timer);
            //切换下一张
            lbt();
            //再启动定时器
            timer = setInterval(lbt, 4000);
        }

        //左箭头切换上一张
        function leftbtnck() {
            //1.获取class = show 的img元素，正在显示的图片
            var imgshow = document.querySelector("#imgchange>img.show");
            var lishow = document.querySelector("#ulbtn>li.show");
            //2.判断一下，是不是第一张图片
            if (imgshow.previousElementSibling) {
                //true，如果正在显示的图片的上一元素有值，是最后一张
                //将class=show传递给上一个元素
                imgshow.previousElementSibling.className = "show";
                lishow.previousElementSibling.className = "show";
            } else {//false，
                //将class=show给第一张图片
                document.getElementById("imgchange").lastElementChild.className = "show";
                document.getElementById("ulbtn").lastElementChild.className = "show";

            }
            //3.将原来显示的图片和圆点清除显示
            imgshow.className = "";
            lishow.className = "";
        }
        document.getElementById("leftbtn").onclick = function () {
            //先停止定时器
            clearInterval(timer);
            //切换下一张
            leftbtnck();
            //再启动定时器
            timer = setInterval(lbt, 4000);
        }

    </script>
    <%--<script>
        $(function () {
            $(".example2").luara({width:"966",height:"490",interval:4500,selected:"seleted",deriction:"left"});
        });
    </script>--%>
</div>
<!--折扣商品-->
<div class="width1200 center_yh hidden_yh">
    <div class="width100" style="height: 45px;line-height: 45px;border-bottom: 2px solid #dd4545; margin-top: 20px;">
        <font class="left_yh font20">折扣大促销</font>
    </div>
    <div class="width100 hidden_yh" style="height: 480px;">
        <div class="normalPic">
            <c:forEach items="${zks}" var="data" varStatus="l">
                <a href="${ctx}/item/view?id=${data.id}">
                    <h3 class="yihang c_33 font14 font100" style="padding-left: 10px;padding-right: 10px;">${data.name}</h3>
                    <p class="red font14" style="padding-left: 10px;">${data.price}</p>
                    <img src="${data.url1}" width="105" height="118" alt="" style="margin:0 auto">
                </a>
            </c:forEach>
        </div>
    </div>
</div>

<!--热门商品-->
<div class="width1200 center_yh hidden_yh">
    <div class="width100" style="height: 45px;line-height: 45px;border-bottom: 2px solid #dd4545; margin-top: 20px;">
        <font class="left_yh font20">热门商品</font>
    </div>
    <div class="width100 hidden_yh" style="height: 480px;">
        <div class="normalPic">
            <c:forEach items="${rxs}" var="data" varStatus="l">
                <a href="${ctx}/item/view?id=${data.id}">
                    <h3 class="yihang c_33 font14 font100" style="padding-left: 10px;padding-right: 10px;">${data.name}</h3>
                    <p class="red font14" style="padding-left: 10px;">${data.price}</p>
                    <img src="${data.url1}" width="105" height="118" alt="" style="margin:0 auto">
                </a>
            </c:forEach>
        </div>
    </div>
</div>
    <%@include file="/common/ufooter.jsp"%>
</body>
</html>



















